//药品耗材统计
import ReactECharts from "echarts-for-react";
import "echarts-liquidfill";

function DrugMaterialStats() {
  const option2 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {
      top: 20,
      left: 140,
      textStyle: {
        color: "#000", // 文本颜色
      },
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#000", // 设置x轴刻度字体颜色为灰色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#ccc",
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      axisLabel: {
        textStyle: {
          color: "#000", // 设置y轴刻度字体颜色为深青色
        },
      },
    },
    series: [
      {
        name: "一次性输氧管",
        type: "bar",
        barWidth: "80%",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [320, 302, 301, 334, 390, 330, 320], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#5A6FC0", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
      {
        name: "手术刀片",
        type: "bar",
        barWidth: "80%",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#9ECA7F", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
      {
        name: "石膏绷带",
        type: "bar",
        barWidth: "80%",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#F2CA6B", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
      {
        name: "单用听诊器",
        barWidth: "80%",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [150, 212, 201, 154, 190, 330, 410], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#DD6E6A", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
      {
        name: "医用绷带",
        type: "bar",
        barWidth: "80%",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#85BEDB", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
      {
        name: "单用听诊器",
        barWidth: "80%",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [133, 120, 301, 205, 290, 330, 320], // 扩展数据以匹配一周七天
        itemStyle: {
          color: "#59A076", // 自定义颜色
        },
        label: {
          show: true,
          position: "inside", // 文本显示在柱状图内部
          color: "#fff", // 文本颜色
        },
      },
    ],
  };
  const option = {
    title: {
      text: "今日药品耗材库存",
      left: "center", // 水平居中
      // top: 'middle', // 垂直居中
      textStyle: {
        color: "#333", // 可以设置标题颜色
        fontSize: 14, // 可以设置标题字体大小
      },
    },
    series: [
      {
        type: "liquidFill",
        data: [0.7, 0.5, 0.4, 0.3],
        color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
        center: ["50%", "50%"],
        radius: "70%",
        amplitude: "8%",
        waveLength: "80%",
        phase: "auto",
        period: "auto",
        direction: "right",
        shape: "circle",
        waveAnimation: true,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
        animationDuration: 2000,
        animationDurationUpdate: 1000,
        outline: {
          show: false,
          borderDistance: 8,
          itemStyle: {
            color: "none",
            borderColor: "#294D99",
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: "rgba(0, 0, 0, 0.25)",
          },
        },
        backgroundStyle: {
          color: "#E3F7FF",
        },
        itemStyle: {
          opacity: 0.95,
          shadowBlur: 50,
          shadowColor: "rgba(0, 0, 0, 0.4)",
        },
        label: {
          show: true,
          color: "#294D99",
          insideColor: "#fff",
          fontSize: 40,
          fontWeight: "bold",
          align: "center",
          baseline: "middle",
          position: "inside",
        },
        emphasis: {
          itemStyle: {
            opacity: 0.8,
          },
        },
      },
    ],
  };

  var option1 = {
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },

    title: {
      text: "今日药品耗材库存",
      left: "center", // 水平居中
      // top: 'middle', // 垂直居中
      textStyle: {
        color: "#333", // 可以设置标题颜色
        fontSize: 14, // 可以设置标题字体大小
        marginBottom: "40px",
      },
      top: "auto", // 将top设置为auto，让ECharts自动计算位置
      padding: [5, 0], // 上下padding增加20px，左右padding不变
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      show: false,
      // orient: 'vertical',
      // left: 'left',
      data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
    },
    series: [
      {
        name: "今日药品耗材库存",
        type: "pie",
        radius: "70%",
        center: ["50%", "50%"],
        label: {
          show: true,

          formatter: "{b} {d}%",
        },
        data: [
          { value: 289, name: "三棱针" },
          { value: 2201, name: "手术刀片" },
          { value: 1960, name: "石膏绷带" },
          { value: 1671, name: "单用停诊器" },
          { value: 1338, name: "医用绷带" },
          { value: 1056, name: "一次性输氧管" },
          { value: 838, name: "一次性检查手套" },
          { value: 653, name: "医用棉签" },
        ],
      },
    ],
  };
  return (
    <div
      style={{
        display: "flex",
        height: "100%",
        width: "100%",
        padding: "10px",
      }}
    >
      <div>
        <div>
          <ReactECharts
            option={option}
            style={{ height: "220px", width: "500px" }}
            lazyUpdate={true}
          />
          <ReactECharts
            option={option1}
            style={{ height: "320px", width: "500px" }}
            lazyUpdate={true}
          />
        </div>
      </div>
      <div>
        <ReactECharts
          option={option2}
          style={{ height: "500px", width: "750px" }}
          lazyUpdate={true}
        />
      </div>
    </div>
  );
}

export default DrugMaterialStats;
